<script setup>
import { ref, nextTick, onMounted } from "vue";
import geoData from "@/assets/address/data_geo.json";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
import { getCityMap } from "@/api/getMap.js";
import { useRouter } from "vue-router";
import "echarts-gl";

const containerRef = ref(null);
const polygon = ref("");
const setPolygon = (areaId) => {
  polygon.value = areaId;
};
const router = useRouter();

const initMap = async () => {
  // 释放掉之前的图表实例
  if (echarts.getInstanceByDom(containerRef.value)) {
    echarts.dispose(containerRef.value);
  }
  // 初始化统计图对象
  var myChart = echarts.init(containerRef.value);
  // 再得到数据的基础上，进行地图绘制
  // 注册地图(数据放在axios返回对象的data中哦)
  const res = await getCityMap(polygon.value + "00");
  // getCityMap.then((res) => {
  echarts.registerMap("GEO", res.data);
  var option = {
    series: [
      {
        name: "地图",
        type: "map3D",
        map: "GEO", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
        label: {
          show: true,
          distance: 5,
          formatter: function (params) {
            return params.name ? params.name : " ";
          },
          textStyle: {
            // 标签的字体样式
            color: "#fff", // 地图初始化区域字体颜色
            fontSize: 8, // 字体大小
          },
        },
        itemStyle: {
          color: "#286ECA", // 地图板块的颜色
          opacity: 1, // 图形的不透明度 [ default: 1 ]
          borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
          borderColor: "#286ECA", // 图形描边的颜色。[ default: #333 ]
        },
        emphasis: {
          label: {
            // label 高亮时的配置
            show: true,
            textStyle: {
              color: "#fff", // 高亮时标签颜色变为 白色
              fontSize: 15, // 高亮时标签字体 变大
            },
          },
          itemStyle: {
            // itemStyle 高亮时的配置
            color: "#66ffff", // 高亮时地图板块颜色改变
          },
        },
      },
    ],
    tooltip: {
      trigger: "item",
      position: "inside",
      formatter: "{b}",
      backgroundColor: "rgba(50, 50, 50, 0.7)",
      textStyle: {
        color: "#FFFFFF",
        textalign: "center",
        fontSize: "12px",
      },
    },
  };
  myChart.setOption(option);
  // 点击跳转
  myChart.on("click", function (args) {
    geoData.some((item) => {
      if (item.label === args.name) {
        router.push("/operation/area/" + item.value);
        return true;
      }
    });
  });
};

defineExpose({
  setPolygon,
  initMap,
});
</script>

<template>
  <div ref="containerRef" id="container"></div>
</template>

<style lang="scss" scoped>
#container {
  height: 100%;
  width: 100%;
}
</style>